<template>
	<view class="tm-propress" :style="{ 
		width: width_upx ? width_upx + 'px' : 'auto' ,
		}">
		<view
			class="tm-propress-wk "
			
			:style="{
				height: height + 'px',
				overflow:loading?'hidden':'inherit'
			}"
		>
			<view :class="[shape=='round'?'round-24':'',bgColor]" class="tm-propress-wk-statick "></view>
			<view :animation="animationData" :class="[shape=='round'?'round-24':'',colors.theme?colors.color:'',loading?'ani':'']"
				class="tm-propress-wk-active flex-end" 
				:style="{
					height: height + 'px',
					width:baifenbi,
					background:colors.theme?'default':colors.color
				}"
			>
			<block v-if="value>0">
				<slot name="default" :value="value">
					<view  class="tm-propress-wk-active-label flex-center px-10 round-24 mr-10" :class="[colors.theme?colors.color:'']" :style="{background:colors.theme?'default':colors.color}">
						<text>{{value}}%</text>
					</view>
				</slot>
			</block>
			
			</view>
			
		</view>
	</view>
</template>

<script>
/**
 * 进度条
 * @property {Function} change value变化时触发.
 * @property {Function} input value变化时触发.
 * @property {Number} value = [] 通过value来赋值进度,如果想双向绑定需要value.sync,建议使用v-model.
 * @property {Number} width = [] 宽度,默认自动宽度,单位upx
 * @property {Number} height = [] 高度,默认6,单位upx
 * @property {String} shape = [round|square] 默认round,方形:square,半圆形:round.
 * @property {String} color = [] 默认primary,可以是16进制,rgb,rgba,主题色名称.
 * @property {String} bg-color = [] 默认 grey-lighten-4 ,背景颜色
 * @property {Boolean} loading = [true|false] 默认false,自动加载中...
 * @example <tm-propress v-model="checked"  ></tm-propress>
 */
export default {
	name: 'tm-propress',
	model:{
		prop:"value",
		event:"input"
	},
	props: {
		// 单位upx
		width: {
			type: Number,
			default: 0
		},
		// 单位upx
		height: {
			type: Number,
			default: 6
		},
		value:{
			type:Number,
			default:0
		},
		// 方形:square,半圆形:round.
		shape:{
			type:String,
			default:"round"
		},
		color:{
			type:String,
			default:"primary"
		},
		loading:{
			type:Boolean,
			default:false
		},
		bgColor:{
			type:String,
			default:'grey-lighten-4'
		},
		// 跟随主题色的改变而改变。
		fllowTheme:{
			type:Boolean|String,
			default:true
		}
	},
	computed: {
		colors:function(){
			return this.$TestColor(this.color_tmeme);
		},
		color_tmeme:function(){
			if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		width_upx: function() {
			
			return uni.upx2px(this.width);
		},
		height_upx: function() {
			return uni.upx2px(this.height);
		},
		baifenbi:function(){
			if(this.loading) return 20 + "%"
			let bl = this.value ;
			if(typeof bl !=='number') bl =0;
			if(bl>=100) bl =100;
			if(bl<=0) bl =0;
			this.$emit("input",bl);
			this.$emit("update:value",bl);
			this.$emit("change",bl);
			return bl + "%"
		}
	},
	data() {
		return {
			animationData:""
		};
	},
	methods: {
		
	},
};
</script>

<style lang="scss" scoped>
.tm-propress {
	.tm-propress-wk {
		position: relative;
		.tm-propress-wk-statick,
		.tm-propress-wk-active {
			height: 100%;
			
		}
		.tm-propress-wk-active {
			position: absolute;
			top: 0;
			left: 0;
			transition: width 0.5s; 
			
			.tm-propress-wk-active-label{
				
				height: 30upx;
				font-size:22upx;
				max-width: 100upx;
				
			}
			&.ani{
				animation: linef 1s linear infinite ;
			}
		}
	}
}

@keyframes linef{
	0%{
		left:0;
		
		opacity: 0.4;
	}
		
	100%{
		left:100%;
		
		opacity: 1;
	}
}
</style>
